<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .slider-bar {
        position: absolute;
        left: 50%;
        top: 300px;
        margin-left: 600px;
        width: 45px;
        height: 130px;
        background-color: pink;
      }

      .w {
        width: 1200px;
        margin: 10px auto;
      }

      .header {
        height: 150px;
        background-color: purple;
      }

      .banner {
        height: 250px;
        background-color: skyblue;
      }

      .main {
        height: 1000px;
        background-color: yellowgreen;
      }

      span {
        display: none;
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="slider-bar">
      <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
      // 需求：
      // 1 拖动滚动条，到banner即将被滚动到窗口上方 时 将侧边栏 变为 固定定位 否则恢复成绝对定位
      // 2 页面继续滚动，到main即将被滚动到窗口上方时 显示 回到顶部，否则隐藏

      // // 思路：
      // 1 上述效果均发生在 拖动滚动条时，所有逻辑 都写在 document的scroll事件处理函数中
      // 2 当window.pageYOffset>=banner.offsetTop时 表示banner即将被滚入窗口上方
      // 3 当window.pageYOffset>=main.offsetTop时 表示main即将被滚入窗口上方

      //   获取元素
      var banner = document.querySelector('.banner');
      var sidebar = document.querySelector('.slider-bar');
      var main = document.querySelector('.main');
      var goTop = document.querySelector('.goBack');

      var bannerTop = banner.offsetTop;
      var sideTop = sidebar.offsetTop;
      var sidebarBannerTop = sideTop - bannerTop;
      var mainTop = main.offsetTop;

      window.addEventListener('scroll', function () {
        // window.pageYOffset 表示 文档滚入浏览器窗口上方的高度
        if (window.pageYOffset >= bannerTop) {
          sidebar.style.position = 'fixed';
          sidebar.style.top = sidebarBannerTop + 'px';
          if (window.pageYOffset >= mainTop) {
            goTop.style.display = 'block';
          } else {
            goTop.style.display = 'none';
          }
        } else {
          sidebar.style.position = 'absolute';
          sidebar.style.top = sideTop + 'px';
        }
      });
      // //1. 获取元素
      // var sliderbar = document.querySelector('.slider-bar');
      // var banner = document.querySelector('.banner');
      // // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
      // var bannerTop = banner.offsetTop
      //     // 当我们侧边栏固定定位之后应该变化的数值
      // var sliderbarTop = sliderbar.offsetTop - bannerTop;
      // // 获取main 主体元素
      // var main = document.querySelector('.main');
      // var goBack = document.querySelector('.goBack');
      // var mainTop = main.offsetTop;
      // // 2. 页面滚动事件 scroll
      // document.addEventListener('scroll', function() {
      //     // console.log(11);
      //     // window.pageYOffset 页面被卷去的头部
      //     // console.log(window.pageYOffset);
      //     // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
      //     if (window.pageYOffset >= bannerTop) {
      //         sliderbar.style.position = 'fixed';
      //         sliderbar.style.top = sliderbarTop + 'px';
      //     } else {
      //         sliderbar.style.position = 'absolute';
      //         sliderbar.style.top = '300px';
      //     }
      //     // 4. 当我们页面滚动到main盒子，就显示 goback模块
      //     if (window.pageYOffset >= mainTop) {
      //         goBack.style.display = 'block';
      //     } else {
      //         goBack.style.display = 'none';
      //     }

      // })
    </script>
  </body>
</html>
